<template>
  <div class="detail">
    <detail-header :id="id"></detail-header>
    <detail-swiper :DeswiperList="DeswiperList" :galleryImgs="galleryImgs"></detail-swiper>
    <detail-content></detail-content>
    <detail-attribute :GoodsAttrList="GoodsAttrList"></detail-attribute>
    <detail-synopsis></detail-synopsis>
    <detail-nav></detail-nav>
  </div>
</template>

<script>
import axios from 'axios'
import DetailHeader from './components/DetailHeader'
import DetailSwiper from './components/DetailSwiper'
import DetailContent from './components/DetailContent'
import DetailAttribute from './components/DetailAttribute'
import DetailSynopsis from './components/DetailSynopsis'
import DetailNav from './components/DetailNav'
export default {
  name: 'Detail',
  data () {
    return {
      id:'',
      DeswiperList:[],
      galleryImgs:[],
      GoodsAttrList:[],
    }
  },
  components:{
    DetailHeader,
    DetailSwiper,
    DetailContent,
    DetailAttribute,
    DetailSynopsis,
    DetailNav,
  },mounted(){
    this.getHomeInfo()
  },
  methods:{
    getHomeInfo(){
        // axios返回的结果是一个promise对象
        axios.get('/shopping_mall/index.php/Home/Detail/index',{
        params:{
          id:this.$route.params.id
        }
      }).then(
        // 注意：这里绝对不可以写成this.getHomeInfoSucc（），否则请求的结果会是undefined
        this.getHomeInfoSucc
      )
    },
    getHomeInfoSucc(res){
        // console.log(res)
        res = res.data 
        // console.log(res)
        if(res.ret && res.data){
          this.id = res.data.id
          this.DeswiperList = res.data.DeswiperList
          this.galleryImgs = res.data.galleryImgs
          this.GoodsAttrList = res.data.GoodsAttrList
        }
    }
  }
}
</script>


<style lang="stylus" scoped>
.detail 
    background-color #efefef
</style>
